<template>
  <div class="placeTypeInfo">
    <el-dialog :visible.sync="visible">
      <div class="panelWrap">

        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>{{ isEdit ? '修改使用场所信息' : '添加使用场所信息' }}</div>
          <i class="el-icon-close" @click="handleCloseDialog" />
        </div>

        <div class="placeType-main">
          <div class="palcetype-content m-t-40">
            <!-- 1 -->
            <div class="placetype-row1 flex flexac flextc m-b-20 ">
              <div class="row-name flex flexac flextc m-l-10">
                <div class="nameBox">
                  <span class="name"><span class="mustval">*</span>场所名称：</span>
                  <el-input v-model="form.name" class="name-input" placeholder="请输入 场所名称" />
                </div>
                <div class="name-location m-l-10">
                  <el-button class="m-r-30 locationBtn el-icon-location-information" @click="choiceCoordinate=true">定 位</el-button>
                </div>
              </div>

              <div class="row-type">
                <span class="type-name"><span class="mustval">*</span>使用场合类型：</span>
                <el-select v-model="form.typeName" class="placeType" placeholder="请选择 使用场合类型">
                  <el-option v-for="item in usePlaceType" :key="item.id" :label="item.typeName" :value="item.name" />
                </el-select>
              </div>
            </div>
            <!-- 2 -->
            <!-- <div class="placetype-row2 flex flexac flexjcsa m-b-20">
              <div class="row-vill">
                <span class="villId">小区ID：</span>
                <el-input v-model.trim="form.villageId" class="vill-input" placeholder="请输入 小区ID" />
              </div>

              <div class="row-villName">
                <span class="villName">小区名称：</span>
                <el-input v-model.trim="form.villageName" class="villName-input" placeholder="请输入 小区名称" />
              </div>
            </div> -->
            <!-- 3 -->
            <div class="placetype-row3 flex flexac flexjcsa m-b-20">
              <div class="row-admin m-l-10">
                <span class="adminName">管理员姓名：</span>
                <el-input v-model.trim="form.chargePerson" class="admin-input" placeholder="请输入 管理员姓名" />
              </div>

              <div class="row-phone m-r-5">
                <span class="phone">管理员手机：</span>
                <el-input v-model.trim="form.chargePersonPhone" class="phone-input" placeholder="请输入 管理员手机" />
              </div>
            </div>
            <!-- 4 -->
            <div class="placetype-row4 flex flexac flexjcsa m-b-20">
              <div class="row-long m-l-45">
                <span class="longitude">经度：</span>
                <el-input v-model.trim="form.longitude" class="long-input" placeholder="请输入 经度" />
              </div>

              <div class="row-lat m-l-30">
                <span class="latitude">纬度：</span>
                <el-input v-model.trim="form.latitude" class="lat-input" placeholder="请输入 纬度" />
              </div>
            </div>
            <!-- 5 -->
            <div class="placetype-row5 flex flexac flextc m-b-20">
              <!-- <div class="row-useState">
                <span class="useState">使用状态：</span>
                <el-select v-model="form.useState" class="sel-State" placeholder="请选择 使用状态">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div> -->

              <div class="row-regionCode flex flexac">
                <span class="regionCode m-l-25">区域：</span>
                <div class="city-box">
                  <City class="code-input" :region-code="regionCode" @emitCity="onSendcity" />
                  <!-- <div class="city-model co-model" /> -->
                  <!-- <div class="city-model2 co-model" /> -->
                </div>
              </div>
            </div>
            <!-- 6 -->
            <div class="placetype-row6 flex flexac flextc m-b-20">
              <div class="row-address flex m-l-20">
                <span class="address m-t-20">安装地址：</span>
                <div v-if="!isEdit">
                  <el-input v-model.trim="form.address" class="add-input" placeholder="请输入 安装地址" />
                  <el-input v-model.trim="form.tung" class="d-input c-input m-l-15 m-r-15" placeholder="例：x区x栋x单元" />
                  <el-input v-model.trim="form.ladder" class="d-input c-input" placeholder="例：x梯" />
                </div>
                <el-input v-else v-model.trim="form.address" class="edit-input" placeholder="请输入 安装地址" />
              </div>
            </div>
            <!-- 8 -->
            <div class="placetype-row8 flex flexac flextc m-b-20">
              <div class="row-address m-l-20">
                <span class="address m-t-20">详细地址：</span> <!-- detailAddress -->
                <el-input v-model.trim="form.detailAddress" class="add-input" placeholder="请输入 详细地址" />
              </div>
            </div>
            <!-- 7 -->
            <div class="placetype-row7 flex flexac flextc m-b-20">
              <div class="row-remark">
                <span class="remark">备注：</span>
                <el-input
                  v-model.trim="form.remark"
                  resize="none"
                  :autosize="{ minRows: 4, maxRows: 6}"
                  type="textarea"
                  class="remark-area m-r-60"
                  placeholder="请输入 备注..."
                />
              </div>
            </div>
          </div>

          <div class="placetype-footer flex flexac flextc footBtn m-t-35 m-b-40">
            <el-button v-if="!isEdit" class="saveBtn m-r-20 btn el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
            <el-button v-else type="success" class="m-r-20 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
            <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-if="choiceCoordinate" :visible.sync="choiceCoordinate">
      <localtionMap class="type-coord" />
    </el-dialog>
  </div>
</template>

<script>

import { createUserPlaceAdd, updateUserPlaceArticle } from '@/api/elevator/elevatorUseplace'
import { fetchPlaceTypeList } from '@/api/elevator/elevatorUseplaceType'
import { showNotice } from '@/utils/toolclass'
import localtionMap from '@/components/localtionMap'
import City from '@/components/city/index'
import bus from '@/utils/bus'

export default {
  components: { City, localtionMap },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean
    }
  },
  data() {
    return {
      form: { ...this.data },
      regionCode: {
        province: 430000,
        city: 430100,
        area: ''
      },
      options: [
        {
          value: '0',
          label: '停用'
        },
        {
          value: '1',
          label: '使用'
        }
      ],
      choiceCoordinate: false,
      visible: false,
      usePlaceType: [],
      formOrigin: {
        id: 0, // id
        name: '', // 场所名称
        remark: '', // 备注
        address: '', // 安装地址
        detailAddress: '', // 详细地址
        chargePerson: '', // 管理员姓名
        chargePersonPhone: '', // 管理员手机
        latitude: '', // 纬度
        longitude: '', // 经度
        regionCode: '', // 区域代码
        typeId: '', // 使用场合类型
        typeName: '', // 使用场合类型名称
        useState: '', // 使用状态
        villageId: '', // 小区ID
        villageName: '', // 小区名称
        version: '' // 版本号
      },
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10],
        total: 40
      },
      param: {
        id: '',
        name: ''
      },
      citys: [
        {
          code: 430100,
          value: '长沙市'
        },
        {
          code: 430200,
          value: '株洲市'
        },
        {
          code: 430300,
          value: '湘潭市'
        },
        {
          code: 430400,
          value: '衡阳市'
        },
        {
          code: 430500,
          value: '邵阳市'
        },
        {
          code: 430600,
          value: '岳阳市'
        },
        {
          code: 430700,
          value: '常德市'
        },
        {
          code: 430800,
          value: '张家界市'
        },
        {
          code: 430900,
          value: '益阳市'
        },
        {
          code: 431000,
          value: '郴州市'
        },
        {
          code: 431100,
          value: '永州市'
        },
        {
          code: 431200,
          value: '怀化市'
        },
        {
          code: 431300,
          value: '娄底市'
        },
        {
          code: 433100,
          value: '湘西土家族苗族自治州'
        }
      ],
      areas: [
        {
          code: 430102,
          value: '芙蓉区'
        },
        {
          code: 430103,
          value: '天心区'
        },
        {
          code: 430104,
          value: '岳麓区'
        },
        {
          code: 430105,
          value: '开福区'
        },
        {
          code: 430111,
          value: '雨花区'
        },
        {
          code: 430112,
          value: '望城区'
        },
        {
          code: 430121,
          value: '长沙县'
        },
        {
          code: 430181,
          value: '浏阳市'
        },
        {
          code: 430182,
          value: '宁乡市'
        },
        {
          code: 430202,
          value: '荷塘区'
        },
        {
          code: 430203,
          value: '芦淞区'
        },
        {
          code: 430204,
          value: '石峰区'
        },
        {
          code: 430211,
          value: '天元区'
        },
        {
          code: 430212,
          value: '渌口区'
        },
        {
          code: 430223,
          value: '攸县'
        },
        {
          code: 430224,
          value: '茶陵县'
        },
        {
          code: 430225,
          value: '炎陵县'
        },
        {
          code: 430281,
          value: '醴陵市'
        },
        {
          code: 430302,
          value: '雨湖区'
        },
        {
          code: 430304,
          value: '岳塘区'
        },
        {
          code: 430321,
          value: '湘潭县'
        },
        {
          code: 430381,
          value: '湘乡市'
        },
        {
          code: 430382,
          value: '韶山市'
        },
        {
          code: 430405,
          value: '珠晖区'
        },
        {
          code: 430406,
          value: '雁峰区'
        },
        {
          code: 430407,
          value: '石鼓区'
        },
        {
          code: 430408,
          value: '蒸湘区'
        },
        {
          code: 430412,
          value: '南岳区'
        },
        {
          code: 430421,
          value: '衡阳县'
        },
        {
          code: 430422,
          value: '衡南县'
        },
        {
          code: 430423,
          value: '衡山县'
        },
        {
          code: 430424,
          value: '衡东县'
        },
        {
          code: 430426,
          value: '祁东县'
        },
        {
          code: 430481,
          value: '耒阳市'
        },
        {
          code: 430482,
          value: '常宁市'
        },
        {
          code: 430502,
          value: '双清区'
        },
        {
          code: 430503,
          value: '大祥区'
        },
        {
          code: 430511,
          value: '北塔区'
        },
        {
          code: 430521,
          value: '邵东县'
        },
        {
          code: 430522,
          value: '新邵县'
        },
        {
          code: 430523,
          value: '邵阳县'
        },
        {
          code: 430524,
          value: '隆回县'
        },
        {
          code: 430525,
          value: '洞口县'
        },
        {
          code: 430527,
          value: '绥宁县'
        },
        {
          code: 430528,
          value: '新宁县'
        },
        {
          code: 430529,
          value: '城步苗族自治县'
        },
        {
          code: 430581,
          value: '武冈市'
        },
        {
          code: 430602,
          value: '岳阳楼区'
        },
        {
          code: 430603,
          value: '云溪区'
        },
        {
          code: 430611,
          value: '君山区'
        },
        {
          code: 430621,
          value: '岳阳县'
        },
        {
          code: 430623,
          value: '华容县'
        },
        {
          code: 430624,
          value: '湘阴县'
        },
        {
          code: 430626,
          value: '平江县'
        },
        {
          code: 430681,
          value: '汨罗市'
        },
        {
          code: 430682,
          value: '临湘市'
        },
        {
          code: 430702,
          value: '武陵区'
        },
        {
          code: 430703,
          value: '鼎城区'
        },
        {
          code: 430721,
          value: '安乡县'
        },
        {
          code: 430722,
          value: '汉寿县'
        },
        {
          code: 430723,
          value: '澧县'
        },
        {
          code: 430724,
          value: '临澧县'
        },
        {
          code: 430725,
          value: '桃源县'
        },
        {
          code: 430726,
          value: '石门县'
        },
        {
          code: 430781,
          value: '津市市'
        },
        {
          code: 430802,
          value: '永定区'
        },
        {
          code: 430811,
          value: '武陵源区'
        },
        {
          code: 430821,
          value: '慈利县'
        },
        {
          code: 430822,
          value: '桑植县'
        },
        {
          code: 430902,
          value: '资阳区'
        },
        {
          code: 430903,
          value: '赫山区'
        },
        {
          code: 430921,
          value: '南县'
        },
        {
          code: 430922,
          value: '桃江县'
        },
        {
          code: 430923,
          value: '安化县'
        },
        {
          code: 430981,
          value: '沅江市'
        },
        {
          code: 431002,
          value: '北湖区'
        },
        {
          code: 431003,
          value: '苏仙区'
        },
        {
          code: 431021,
          value: '桂阳县'
        },
        {
          code: 431022,
          value: '宜章县'
        },
        {
          code: 431023,
          value: '永兴县'
        },
        {
          code: 431024,
          value: '嘉禾县'
        },
        {
          code: 431025,
          value: '临武县'
        },
        {
          code: 431026,
          value: '汝城县'
        },
        {
          code: 431027,
          value: '桂东县'
        },
        {
          code: 431028,
          value: '安仁县'
        },
        {
          code: 431081,
          value: '资兴市'
        },
        {
          code: 431102,
          value: '零陵区'
        },
        {
          code: 431103,
          value: '冷水滩区'
        },
        {
          code: 431121,
          value: '祁阳县'
        },
        {
          code: 431122,
          value: '东安县'
        },
        {
          code: 431123,
          value: '双牌县'
        },
        {
          code: 431124,
          value: '道县'
        },
        {
          code: 431125,
          value: '江永县'
        },
        {
          code: 431126,
          value: '宁远县'
        },
        {
          code: 431127,
          value: '蓝山县'
        },
        {
          code: 431128,
          value: '新田县'
        },
        {
          code: 431129,
          value: '江华瑶族自治县'
        },
        {
          code: 431202,
          value: '鹤城区'
        },
        {
          code: 431221,
          value: '中方县'
        },
        {
          code: 431222,
          value: '沅陵县'
        },
        {
          code: 431223,
          value: '辰溪县'
        },
        {
          code: 431224,
          value: '溆浦县'
        },
        {
          code: 431225,
          value: '会同县'
        },
        {
          code: 431226,
          value: '麻阳苗族自治县'
        },
        {
          code: 431227,
          value: '新晃侗族自治县'
        },
        {
          code: 431228,
          value: '芷江侗族自治县'
        },
        {
          code: 431229,
          value: '靖州苗族侗族自治县'
        },
        {
          code: 431230,
          value: '通道侗族自治县'
        },
        {
          code: 431281,
          value: '洪江市'
        },
        {
          code: 431302,
          value: '娄星区'
        },
        {
          code: 431321,
          value: '双峰县'
        },
        {
          code: 431322,
          value: '新化县'
        },
        {
          code: 431381,
          value: '冷水江市'
        },
        {
          code: 431382,
          value: '涟源市'
        },
        {
          code: 433101,
          value: '吉首市'
        },
        {
          code: 433122,
          value: '泸溪县'
        },
        {
          code: 433123,
          value: '凤凰县'
        },
        {
          code: 433124,
          value: '花垣县'
        },
        {
          code: 433125,
          value: '保靖县'
        },
        {
          code: 433126,
          value: '古丈县'
        },
        {
          code: 433127,
          value: '永顺县'
        },
        {
          code: 433130,
          value: '龙山县'
        }
      ]
    }
  },
  computed: {
    getcoordinate: function() {
      if (this.form.longitude === '' || this.form.latitude === '') {
        return ''
      } else {
        return ('' + this.form.longitude) + ' , ' + (this.form.latitude + '')
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      }
      this.visible = v
    },
    data(v) {
      // console.log(v)
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
        const str = this.regionCode.province
        var city1 = parseInt(String(str).substr(0, 3) + v.regionCode.substr(3, 1) + '00')
        const city2 = this.citys.filter(item => {
          if (city1 === item.code) {
            return item
          }
        })
        const area1 = this.areas.filter(item => {
          // console.log(item, v.regionCode)
          if (parseInt(v.regionCode) === item.code) {
            return item
          }
        })
        this.regionCode = {
          province: this.regionCode.province,
          city: city2[0].value,
          area: area1[0].value
        }
      }
    }
  },
  created() {
    this.getPlacetypeList()
    this.onSendCoordinate()
    this.onCloseCoordinate()
  },
  methods: {
    getPlacetypeList() {
      fetchPlaceTypeList(this.param.id, this.param.name, this.paging.currentPage, this.paging.pageSize).then((res) => {
        if (res.code === '000000') {
          // console.log(res)
          this.usePlaceType = res.data
        }
      })
    },
    onSendCoordinate() {
      bus.$on('sendCoordinate', (data) => {
        this.form.longitude = data.lng
        this.form.latitude = data.lat
        this.handleCloseCoordinate()
      })
      bus.$on('sendCoordinateAddress', (data) => {
        this.form.detailAddress = data.address
        this.form.address = (data.province === undefined ? '' : data.province) + '' + (data.city === undefined ? '' : data.city) + '' + (data.title === undefined ? '' : data.title)
        this.form.name = this.form.name ? this.form.name : (data.title === undefined ? '' : data.title)
      })
    },
    onCloseCoordinate() {
      bus.$on('closeCoordinate', (data) => {
        this.handleCloseCoordinate()
      })
    },
    onSendcity(res) {
      // console.log(res)
      this.form.regionCode = res
    },
    handleCloseCoordinate() {
      this.choiceCoordinate = false
    },
    handleSave(type) {
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入场所名称或定位选择')
        return
      }
      if (!(/^\S+$/.test(this.form.typeName))) {
        showNotice('error', '提示', '请选择所以场合类型')
        return
      }
      if (!(/^\S+$/.test(this.form.chargePerson))) {
        showNotice('error', '提示', '请输入管理员姓名')
        return
      }
      if (!(/^\S+$/.test(this.form.chargePersonPhone))) {
        showNotice('error', '提示', '请输入管理员手机号码')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.form.chargePersonPhone))) {
        showNotice('error', '提示', '手机号格式错误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.form.address))) {
        showNotice('error', '提示', '请选择定位地址')
        return
      }
      if (this.form.regionCode.area === undefined) {
        showNotice('error', '提示', '请选择地区')
        return
      }
      // ======
      // if (!(/^\S+$/.test(this.form.tung))) {
      //   showNotice('error', '提示', '请输入')
      //   return
      // }

      this.usePlaceType.filter(item => {
        if (item.name === this.form.typeName) {
          this.form.typeId = item.id
        }
      })

      const params = {
        id: this.form.id, // id
        name: this.form.name, // 场所名称
        remark: this.form.remark, // 备注
        address: this.form.address + (this.form.tung === undefined ? '' : this.form.tung) + (this.form.ladder === undefined ? '' : this.form.ladder), // 安装地址
        detailAddress: this.form.detailAddress, // 详细地址
        chargePerson: this.form.chargePerson, // 管理员姓名
        chargePersonPhone: this.form.chargePersonPhone, // 管理员手机
        latitude: this.form.latitude, // 纬度
        longitude: this.form.longitude, // 经度
        regionCode: this.form.regionCode.area, // 区域代码
        typeId: this.form.typeId, // 使用场合类型
        typeName: this.form.typeName, // 使用场合类型名称
        useState: this.form.useState, // 使用状态
        villageId: this.form.villageId, // 小区ID
        villageName: this.form.villageName, // 小区名称
        version: this.form.version // 版本号
      }
      // console.log(this.form.regionCode)
      // console.log(params)

      if (type === 0) {
        this.handleCreateAdd(params)
      } else {
        this.handleUpdate(params)
      }
    },
    // 新增
    handleCreateAdd(data) {
      createUserPlaceAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '添加成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '添加失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    // 修改
    handleUpdate(data) {
      updateUserPlaceArticle(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '修改成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '修改失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import '@/styles/public.scss';
.placeTypeInfo {
  .coord-dialog {
    .type-coord {
      margin-left: 140px;
      .co-map {
        width: 848px;
      }
      .co-bottom {
        width: 849px;
        height: 78px;
        background: #ffffff;
      }
    }
  }
  .panelWrap {
    width: 850px;
    margin-left: -140px;
    background: #ffffff;
    .placeType-main {
      .palcetype-content {
        .placetype-row1 {
          .row-name {
            .nameBox {
              .name {}
              .name-input {}
            }
            .name-location {
              .locationBtn {
                width: 78px;
                height: 40px;
              }
              .placeType {}
            }
          }
          .row-type {
            .type-name {}
          }
        }
        .placetype-row2 {
          .row-vill {
            margin-left: 32px;
            .villId {}
            .vill-input {}
          }
          .row-villName {
            .villName {}
            .villName-input {
              width: 194px;
            }
          }
        }
        .placetype-row3 {
          .row-admin {
            .adminName {}
            .admin-input {}
          }
          .row-phone {
            .phone {}
            .phone-input {
              width: 195px;
            }
          }
        }
        .placetype-row4 {
          .row-long {
            .longitude {}
            .lat-input {}
          }
          .row-lat {
            .latitude {}
            .lat-input {
              width: 194px;
            }
          }
        }
        .placetype-row5 {
          .row-useState {
            .useState {}
            .sel-State {}
          }
          .row-regionCode {
            margin-left: 50px;
            .regionCode {}
            .city-box {
              position: relative;
              .code-input {
                .dist {
                  label {
                    select {
                      width: 180px;
                      margin-right: 28px;
                      option {}
                    }
                  }
                }
              }
              // .co-model {
              //   position: absolute;
              //   top: 0;
              //   width: 180px;
              //   height: 40px;
              //   border-radius: 3px;
              //   background: rgba(200, 200, 200, .5);
              // }
              .city-model {
                // left: 0;
                }
              // .city-model2 {
              //   left: 212px;
              // }
            }
          }
        }
        .placetype-row6 {
          .address {
            line-height: 0px;
          }
          .add-input {
            width: 261px;
          }
          .c-input {
            width: 152px;
          }
          .edit-input {
            width: 604px;
          }
        }
        .placetype-row8 {
          .row-address {
            .address {}
            .add-input {
              width: 604px;
            }
          }
        }
        .placetype-row7 {
          .row-remark {
            margin-left: 110px;
            .remark {
              vertical-align: top;
            }
            .remark-area {
              width: 604px;
            }
          }
        }
      }
      .placetype-footer {
        .btn {
          width: 100px;
          height: 40px;
        }
      }
    }
  }
}

</style>
